<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    input { font-size: 30px; }
    .box {
        display: flex;
    }
    .year {
        width: 50px;
        height: 50px;
        margin: 10px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <h1> 运用冒泡机制</h1>
    <div class="box" onclick="myyear()">
        <div class="year">1</div>
        <div class="year">2</div>
        <div class="year">3</div>
        <div class="year">4</div>
        <div class="year">5</div>
    </div>



    <h1> 表单  onfocus 得焦点, onblur 失焦点, onsubmit</h1>

    <!-- <input type="text" onblur="mychange('white')" onfocus="mychange('yellow')" value="龙龟" />  
    <input type="text" onblur="mychange('white')" onfocus="mychange('yellow')" value="武器" />
    <input type="text" 
    onblur="mychange('white')" 
    onfocus="mychange('yellow')" value="寡妇" /> -->

    <input type="text" value="1"/>
    <input type="text" value="2"/>
    <input type="text" value="3"/>
    <input type="text" value="4"/>

    <h1>事件的冒泡</h1>
    <div onclick="show('div')">
        Div 标签
        <p onclick="show('p')">
            P标签
            <span  onclick="show('span孙子')" >孙子</span>
        </p>
    </div>

    
</body>
<script>
function myyear(){
    let obj = event.srcElement;
    obj.style.background = 'red';
    console.log( obj );
}

function show(m){
    console.log( m );
    event.stopPropagation(); // 阻止传播
}

//找三个 input 
let sz =  document.querySelectorAll('input')
for(a of sz ){
    a.addEventListener('focus',function(){ mychange('pink')})
    a.addEventListener('blur',function(){ mychange('white')})
}

function mychange( color ){
    let obj = event.srcElement;
    obj.style.background= color;
}

// function myget(){
//     let obj = event.srcElement;
//     obj.style.background="pink";
// }

// function mylose(){
//     let obj = event.srcElement;
//     obj.style.background="white";
// }

</script>
</html>